  <template>
  <!-- 油品发票明细 -->
  <el-dialog title="账单明细" :visible.sync="dialogVisible" :close-on-click-modal="closeModal" :close-on-press-escape="closeEscape" :before-close="close" class="bill-detail-dialog" width="900px">
    <div class="oil-invoice-detail-wrapper">
      <div class="oil-detail-handler">
        <el-button size="mini" @click="download" icon="el-icon-download">下载</el-button>
      </div>
      <mer-table :loading="tableLoading"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :pagination="pagination"
        @SizeChange="handleSizeChange"
        @PageChange="pageChange"
        :hasIndex="true">
      </mer-table>
    </div>
  </el-dialog>
</template>
<script>
import dialog from '@mix/dialog'
import listPage from '@/mixins/listPage'
import queryMix from '@/views/finance/mixins/query';
import { getOilInvoiceDetailApi,downloadOilInvoiceDetailApi} from '@/api/finance'
// 表格参数配置
let tableConfig = [
  { label: '油站编码', prop: 'gasId', width: 150 },
  { label: '油站名称', prop: 'gasName', width: 136  },
  { label: '油品型号', prop: 'oilNoName', width: 180  },
  { label: '账单日期', prop: 'billDate', width: 136  },
  { label: '账单金额(元)', prop: 'invoiceAmount',width: 136 },
]
export default {
  mixins: [dialog, listPage, queryMix],
  props:{
    data:{
      type: Object,
      default: () => ( {} )
    }
  },
  data(){
    return {
      tableConfig: tableConfig,
    }
  },
  created(){
    this.initPage()
  },
  methods:{
    initPage () {
      //此处，需要给接口传的参数，需要防在searchBar里
      this.initList(getOilInvoiceDetailApi,false, null, this.data)
    },
    download () {
      this.downloadFile(downloadOilInvoiceDetailApi,'账单明细列表',this.data)
    }
  }
}
</script>
<style lang="less" scoped>
.oil-invoice-detail-wrapper{
  padding-bottom: 25px;
  .oil-detail-handler{
    padding: 0 5px;
  }
}
</style> 